<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>业务使用</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card class="boxCard">
            <el-row>
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item>条件区域</el-breadcrumb-item>
                </el-breadcrumb>
            </el-row>
            <el-row>
                <el-form>
                    <el-col :span="8">
                        <el-input class="findUser" type="text" placeholder="请输入手机号" v-model="phoneCode"></el-input>
                    </el-col>
                    <el-col :span="2">
                        <el-button type="primary" @click="queryList">查询</el-button>
                    </el-col>
                </el-form>
            </el-row>
        </el-card>
        <el-card>
            <el-row>
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item>列表区域</el-breadcrumb-item>
                </el-breadcrumb>
            </el-row>
            <el-table
                    :data="tableList"
                    border
                    height="370"
                    style="width: 100%">
                <el-table-column
                        prop="id"
                        label="业务ID"
                        width="66px"
                        align='center'>
                </el-table-column>

                <el-table-column
                        prop="policyName"
                        label="政策名"
                        align='center'>
                </el-table-column>
                <el-table-column
                        prop="effectiveTime"
                        label="生效时间"
                        align='center'>
                </el-table-column>
                <el-table-column
                        prop="expirationTime"
                        label="过期时间"
                        align='center'>
                </el-table-column>
                <el-table-column
                        prop="courseId"
                        label="政策科目id"
                        align='center'>
                </el-table-column>
                <el-table-column
                        label="操作"
                        width="200px"
                        align='center'>
                    <template slot-scope="scope">
                        <el-button type="danger" v-model="disabled" @click="useBisiness(scope.row.id)">办理业务</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="page">
                <el-pagination
                        background
                        layout="prev, pager, next" :total="this.count"
                        @current-change="fengye($event)"
                >
                </el-pagination>
                总条数:{{ this.count }}
                当前页数: {{ this.page }}/{{ this.pageCount }} 页
            </div>
        </el-card>
    </div>
</template>

<script>
    export default {
        name: "addUser",
        data() {
            return {
                disabled: true,
                readonly: true,
                index: 1,
                zongji: 5,
                yeshu: 1,
                page: 1,
                pageCount: 0,
                count: 0,
                limit: 10,
                zongyeshu: 5,
                phoneCode: "",
                tableList: [],
                valueType:'2',
                formData:[],
                // form: {
                //     phoneCode: '',
                //     policyName: '',
                //     brandId: '',
                //     phoneCount: '',
                //     phoneMoney: ''
                // },
                // delform:{
                //     id:'',
                // }
            }
        },
        methods: {
            getList(page) {
                this.page = page;
                this.$axios.get('api/phone/handlingPolicy', {
                    params: {
                        limit: 10,
                        index: this.page,
                        phoneCode: this.phoneCode,
                    }
                }).then(res => {
                    if (res.data.code == 200) {
                        console.log(res.data)
                        this.tableList = res.data.data

                    } else if (res.data.code == 405) {
                        // this.$message(res.data.message)
                        this.$message({
                            message: "请求方式不正确",
                            type: 'warning'
                        })
                    } else if (res.data.code == 500) {
                        // this.$message(res.data.message)
                        this.$message({
                            message: "后台服务逻辑错误",
                            type: 'warning'
                        })
                    } else if (res.data.code == 404) {
                        // this.$message(res.data.message)
                        this.$message({
                            message: "找不到页面",
                            type: 'warning'
                        })
                    }
                })
            },
            //查询
            queryList() {
                this.page=1,
                    this.pageCount=0,
                    this.count=0,
                this.$axios.get('api/phone/handlingPolicy', {
                    params: {
                        limit: this.limit,
                        index: this.page,
                        phoneCode: this.phoneCode,
                    }
                }).then(res => {
                    console.log(res)
                    let result = res.data;
                    this.count =result.pageCount;
                    this.pageCount = Math.ceil(result.pageCount/this.limit);
                    this.$message({
                        message: res.data.msg,
                        type: 'warning'
                    })
                    this.tableList = result.data;
                    this.formData.push(result)
                })
            },
            cancel() {
                this.dialogVisible = false
            },
            fengye: function (e) {
                // console.log(e);
                this.yeshu = e;
                this.page = e;
                console.log(this.page)
                this.getList(e);
            },
            useBisiness(policyInfoId) {
                console.log(1)
                console.log(this.formData[0].phone)
                this.$axios.post("api/phone/handlingPolicyUpdate",{
                    phoneId: this.formData[0].phone.id,
                    policyInfoId: policyInfoId,
                    userId: this.$store.state.userInfo.id
                }).then(res => {

                    this.$message({
                        message: res.data.msg,
                        type: 'warning'
                    })
                })
                this.getList(this.page)
            }
        }

    }
</script>

<style scoped>
.el-breadcrumb{
    margin-bottom: 10px;
}
    .page{
        margin-top: 20px;
    }
    .el-col {
        height: 50px;
        line-height: 50px;
    }
    .addHeader {
        height: 100px;
    }
    .boxCard {
        margin-bottom: 20px;
    }

    .addUser {
        margin-right: 100px;
    }
    .statusActive{
        padding: 5px 10px;
        color: white;
        background-color: green;
    }
    .statusDel{
        padding: 5px 10px;
        color: white;
        background-color: red;
    }
    .el-table{
        text-align: center;
    }

    .el-table-column {
        height: 40px;
    }
</style>